[ Day 23 | JS ] 獲得選取元素的相關資訊 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

第 12 屆 iThome 鐵人賽

DAY 23

自我挑戰組

大器可以晚成—— 30歲才開始的轉職工程師之路系列第 23 篇

[ Day 23 | JS ] 獲得選取元素的相關資訊

12th鐵人賽

Ruta

2020-10-06 16:42:09

514 瀏覽

分享至

有沒有想過，有些網頁或小遊戲，隨著滑鼠移動就可以產生許多不同互動效果；這些效果是怎麼做出來的呢？
其中一種方法就是去監聽目前滑鼠或目標物件的位置，然後當座標移動時去作出相對應的動作。

當我們選取元素時，又該怎麼知道他的座標等相關資訊呢？
首先我們一樣先寫個簡單的 HTML，這邊我寫了一個按鈕：

<body>
 <input type="button" value="點我" class="btn">
</body>

接著，使用 querySelector 將它選起來：

let btn = document.querySelector('.btn');

然後綁定當它點擊時會觸發的函式：

btn.onclick = function(e) {
  console.log(e);
};

這時打開你的開發者工具就會發現它出現了這樣的一個 object：

當執行像 onclick 這類的事件時，會自動在你的 function() 中帶入一個值，這個值會記錄在括弧中第一個位置；也就是上面例子中的 function(e) 裡面的 e。
這個值是可以依照你喜好隨便命名的，但一般我們會取名叫 event 或簡寫成 e；此時用 console.log(e) 就可以在開發者工具裡看到。

最前面提到的座標，就在這裡，隨著你點擊物件的不同位置，座標也會跟著不同。